<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-08 16:00:47
 * @LastEditTime: 2023-11-10 15:14:43
 * @LastEditors: sueRimn
-->

<template>
  <view class="progress-bar">
    <view class="bar" :class="(step / total)>0.5?'active':''">
      <view class="progress" :style="{ width: (step / total * 100) + '%' }" />
      <view class="num">{{step}}/{{total}}</view>
    </view>
  </view>
</template>


<script>
export default {
  props: {
    step: { type: Number, default: 0 },
    total: { type: Number, default: 0 },
  }
}
</script>

<style lang="scss" scoped>

.progress-bar{
  background-color: #fff;
  .active{
    .num{
      color: #333333;
    }
    
  }
}

.bar{
  position: relative;
  width: 100%;
  height: 24rpx;
  background: #F6F7F9;
  overflow: hidden;
  .progress{
    width: 0;
    height: 100%;
    background: var(--hui-color-primary);
    transition: width 0.3s ease-in-out;
  }

  .num{
    position: absolute;
    top: 0;
    right: 12rpx;
    text-align: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 22rpx;
  margin-top: -2rpx;
	color: #333333;
  }
}
</style> 